<template>
  <div id="app">
    <header v-if="userStore.isLoggedIn" class="app-header">
      <div class="header-content">
        <h1>ERP管理系统</h1>
        <nav class="main-nav">
          <router-link to="/">首页</router-link>
          <router-link to="/finance/vouchers">财务</router-link>
          <router-link to="/production/orders">生产</router-link>
          <router-link to="/supply">供应链</router-link>
          <router-link to="/hr">人力资源</router-link>
        </nav>
        <div class="user-info">
          <span>欢迎, {{ userStore.userName }}</span>
          <button @click="handleLogout" class="logout-btn">退出</button>
        </div>
      </div>
    </header>
    
    <main class="app-main">
      <router-view />
    </main>
    
    <footer class="app-footer">
      <p>&copy; 2025 ERP管理系统. 保留所有权利.</p>
    </footer>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user'

export default {
  name: 'App',
  setup() {
    const userStore = useUserStore()
    
    const handleLogout = () => {
      userStore.logout()
      // 退出后使用硬跳转确保正确显示登录页
      window.location.href = '/login'
    }
    
    return {
      userStore,
      handleLogout
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background-color: #343a40;
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.header-content h1 {
  font-size: 1.5rem;
}

.main-nav a {
  color: white;
  text-decoration: none;
  margin-left: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.main-nav a:hover,
.main-nav a.router-link-exact-active {
  background-color: #495057;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logout-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.logout-btn:hover {
  background-color: #c82333;
}

.app-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.app-footer {
  background-color: #f8f9fa;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid #dee2e6;
  margin-top: auto;
}
</style>